<template>
  <div class="footer">
    <div class="item">
        <countTo :startVal="0" :endVal="50" :duration="5000" />
        <p>已接入企业数</p>
      <div class="corner">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
    <div class="item">
        <countTo :startVal="0" :endVal="50" :duration="5000" />
       <p>企业总数</p>
      <div class="corner">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
    <div class="item">
        <countTo :startVal="0" :endVal="50" :duration="5000" />
       <p>已接入车辆数</p>
      <div class="corner">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
    <div class="item">
        <countTo :startVal="0" :endVal="50" :duration="5000" />
       <p>车辆总数</p>
      <div class="corner">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
    <div class="item">
        <countTo :startVal="0" :endVal="50" :duration="5000" />
       <p>主动防控接入数</p>
      <div class="corner">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
  </div> 
</template>
<script>
export default {

};
</script>
<style lang="scss"  scoped>
.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  width: 100%;
  display: flex;
  justify-content:space-between;
  align-items: center;
  height: 124px;
  .item{
      width:calc( 20% - 10px );
      height:100%;
      position: relative;
       border: 1px solid rgba(39, 88, 134, 0.73);
    background-color: rgba(0, 39, 87, 0.73);
    box-shadow: inset 0 0 10px 0 rgba(153, 204, 255, 0.1);
    border-radius: 8px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    //background-color: rgba(23, 87, 121, 0.2);
    &:hover {
        //background: rgba(18, 35, 87, 0.9);
        // box-shadow: inset 0 0 30px 0 #9b95e3;
        box-shadow: 0 0 10px rgba(108, 235, 252, 0.99);
        .panel-tools {
            display: block;
        }
        .panel-unit {
            display: none;
        }
    }
        .corner {
        >i {
            position: absolute;
            width: 24px;
            height: 24px;
            border: 2px solid rgba(31, 29, 29, 0);
            &:nth-child(1) {
                top: -2px;
                left: -2px;
                border-left-color: #1399c5;
                border-top-color: #1399c5;
                border-radius: 8px 0 0 0;
            }
            &:nth-child(2) {
                top: -2px;
                right: -2px;
                border-right-color: #1399c5;
                border-top-color: #1399c5;
                border-radius: 0 8px 0 0;
            }
            &:nth-child(3) {
                bottom: -2px;
                left: -2px;
                border-left-color: #1399c5;
                border-bottom-color: #1399c5;
                border-radius: 0 0 0 8px;
            }
            &:nth-child(4) {
                bottom: -2px;
                right: -2px;
                border-right-color: #1399c5;
                border-bottom-color: #1399c5;
                border-radius: 0 0 8px 0;
            }
        }
    }
    span{
        color:#f0ca61;
        font-size:22px;
    }
    p{
        color:#6a9ffa;
        font-size:14px;
        margin-top:5px;
    }
  }
}
</style>